<template>
  <div class="window">
    <header-guide></header-guide>
    <div class="main">
      <div class="aside" v-scrollBar>
        <el-menu
          :router="true"
          :default-active="$route.path"
          :collapse="isCollapse"
          class="el-menu-vertical"
          :background-color="colorOption.menu_background_color"
          :text-color="colorOption.menu_text_color"
          :active-text-color="colorOption.menu_active_text_color"
        >
          <el-menu-item
            v-if="isCollapse==false"
            @click="isCollapse=true">
            <i class="el-icon-s-fold"></i>
            <span slot="title">收起</span>
          </el-menu-item>
          <el-menu-item
            v-else
            @click="isCollapse = false">
            <i class="el-icon-s-unfold"></i>
            <span slot="title">展开</span>
          </el-menu-item>

          <template v-for="homeTab in HomeTabs">
            <el-submenu
              v-if="homeTab.sub == true"
              :key="homeTab.index"
              :index="homeTab.index">
              <template slot="title">
                <i :class="homeTab.icon"></i>
                <span slot="title">{{homeTab.title}}</span>
              </template>
              <el-menu-item
                v-for="subTab in homeTab.children"
                :key="subTab.index"
                :index="subTab.index"
                :route="subTab.route">
                <i :class="subTab.icon"></i>
                <span slot="title">{{subTab.title}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :key="homeTab.index"
              :index="homeTab.index"
              :route="homeTab.route">
              <i :class="homeTab.icon"></i>
              <span slot="title">{{homeTab.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="content" v-scrollBar>
        <router-view/>
      </div>
    </div>
    <footer-guide></footer-guide>
  </div>
</template>

<script>
import HeaderGuide from '@/components/common/HeaderGuide'
import FooterGuide from '@/components/common/FooterGuide'
import HomeTabs from '@/properties/HomeTabs.js'
export default {
  name: 'Home',
  components: {
    HeaderGuide,
    FooterGuide
  },
  data () {
    return {
      HomeTabs: HomeTabs.HomeTabs,
      isCollapse: false,
      colorOption: this.$GlobalConst.GlobalColor.menu_color
    }
  },

  mounted () {
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical {
  min-height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: $aside_width;
  min-height: 100%;

}

.window {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    overflow: auto;
    display: flex;

    .aside {
      position:relative;
      user-select: none;
    }

    .content {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      position:relative;
      overflow: auto;
      padding: 10px;
    }
  }
}
</style>
